<template>
    <div class="select-box">
        <el-card class="box-card">

			<!-- 图片 -->
			<div style="width: 70%; height: 70%;margin: auto">
				<img style="width:100%;height: 100%" src="../../assets/selected/ok.svg" >
			</div>

			<!-- 更换寝室按钮 -->
            <div style="width: 100%; height: 30%; margin-top: 50px;font-size:600">

				<!-- 已选寝室信息 -->
                你已选择 {{this.dormInfo.region + " " + this.dormInfo.dormNumber + " " + this.dormInfo.bed + "号床"}}

				<!-- 更换按钮 -->
				<el-button type="primary" @click="dialogVisible = true">更换寝室</el-button>
            </div>
        </el-card>

		<!-- 确认更换寝室弹窗 -->
		<el-dialog
            v-model="dialogVisible"
            title="请确认"
            width="30%"
            center
        >
            <span>确认更换寝室？</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmDelete()">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>

import {ElMessage } from 'element-plus'

import request from '../../utils/request'

export default {
	name: 'Select',
	data() {
		return {
			dormInfo: '',
			dialogVisible: false
		}
	},
	created() {
		this.getSelected()
	},
	methods: {

		// 获取已选寝室信息
		getSelected() {
			request({
				method: 'get',
				url: '/api/dorm/select',
				headers: {'jwtToken': this.$store.getters.getToken}
			}).then(res => {
				if (res.code === 200) {
					this.dormInfo = res.data;
				}
			})
		},

		// 删除已选寝室信息
		confirmDelete() {
			request({
				method: 'post',
				url: '/api/dorm/deleteBedInformation',
				headers: {'jwtToken': this.$store.getters.getToken}
			}).then(res => {
				if (res.code === 200) {
					this.dialogVisible = false;
					this.$router.replace('/dist/choosebed/step1')
				} else {
					ElMessage.error('发生错误');
				}
			})
		}

	}
}
</script>

<style lang="less">


.select-box {
  width: 100%;
  height: 100%;
}

.box-card {
    width: 100%;
    height: 100%;
}

.el-card__body {
	width: 100%;
	height: 100%;
}
</style>
